<template>
  <div style="height: 100%">
    <div style="height: 10%; padding: 0px 0px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="条件">
          <el-input placeholder="ID / 账号 / 手机号 / 邮箱" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 90%" ref="divs">
      <el-table ref="table" border :data="tableData" style="width: 100%" :max-height="tableHeight">
        <el-table-column fixed prop="id" label="ID"> </el-table-column>
        <el-table-column prop="username" label="账号"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="createtime" label="注册时间"> </el-table-column>
        <el-table-column prop="lastlogintime" label="最后登录时间"> </el-table-column>
        <el-table-column prop="statu" label="状态">
          <template #default="scope">
            <i :class="scope.row.statu == 0 ? 'el-icon-success color-success' : 'el-icon-error color-danger'">{{ scope.row.statu == 0 ? '正常' : '冻结' }}</i>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">{{ scope.row.statu == 0 ? '冻结' : '解冻' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()

let tableData = ref([])
let tableHeight = ref()
onMounted(() => {
  tableHeight.value = proxy.$refs.divs.offsetHeight
  proxy.$axios.get('/').then(function (data) {
    let userList = [
      {
        id: '1',
        username: 'test1',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 0,
        ordernum: '6'
      },
      {
        id: '2',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '3',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '4',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '5',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '2',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '3',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '4',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '5',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '2',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '3',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '4',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '5',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '2',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '3',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '4',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '5',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '2',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '3',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '4',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '5',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '2',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '3',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '4',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      },
      {
        id: '5',
        username: 'test2',
        phone: '153****0726',
        email: '122*****11@qq.com',
        createtime: '2021-03-02',
        lastlogintime: '2021-03-02',
        statu: 1,
        ordernum: '6'
      }
    ]
    // userList = []
    tableData.value = userList
  })
})
</script>

<style lang='less' scoped>
.color-success {
  color: #67c23a;
}
.color-danger {
  color: #f56c6c;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
  height: 100%;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>
